<template>
  <div @mouseup="cancelActive" class="hello">
    <!-- <table id="table_box">
      <tr v-for="(trItem, trI) in tableData" :key="trI">
        <td

          v-for="(bd_item, tdI) in trItem"
          :key="tdI"
        >
          {{ bd_item }}
        </td>
      </tr>
    </table> -->

    <div class="table">
      <div class="tr" v-for="(trItem, trI) in tableData" :key="trI">
        <div
          class="td"
          v-for="(bd_item, tdI) in trItem"
          :key="tdI"
          @mousedown="moveStart(trI, tdI)"
          @mouseover="moveOver(trI, tdI)"
          @mouseup="moveUp(trI, tdI)"
        >
          <span :class="bd_item.isActive == true ? 'active' : ''">
            {{ bd_item.value }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// var Bugout = require('bugout')
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableMousedown: false,
      coordinatesTable: {
        x: -1,
        y: -1
      },
      throughCoordinate: {
        x: -1,
        y: -1
      },
      minX: -1,
      maxX: -1,
      minY: -1,
      maxY: -1,
      tableData: [
        [
          { index: 'date', value: '2016-05-02', isActive: false },
          { index: 'name', value: '王小虎', isActive: false },
          {
            index: 'address',
            value: '上海市普陀区金沙江路 1518 弄',
            isActive: false
          }
        ],
        [
          { index: 'date', value: '2016-05-02', isActive: false },
          { index: 'name', value: '王小虎', isActive: false },
          {
            index: 'address',
            value: '上海市普陀区金沙江路 1518 弄',
            isActive: false
          }
        ]
      ]
    }
  },
  created () {},
  mounted () {
    this.watchKeyEvent()
  },
  methods: {
    watchKeyEvent () {
      const setKeyStatus = (keyCode, status) => {
        console.log(keyCode)
        switch (keyCode) {
          case '16':
            if (this.onShfit === status) return
            console.log('shif', status ? '按下' : '抬起')
            this.onShfit = status
            break
          case 'Control':
            if (this.onCtrl === status) return
            console.log('ctrl', status ? '按下' : '抬起')
            this.onCtrl = status
            break
        }
      }
      document.onkeydown = (e) => {
        setKeyStatus(e.key, true)
      }
      document.onkeyup = (e) => {
        setKeyStatus(e.key, false)
      }
    },
    moveStart (trI, tdI) {
      console.log(trI, tdI)
      this.tableMousedown = true
      this.coordinatesTable.x = trI
      this.coordinatesTable.y = tdI

      // 先清屏
      this.tableData.forEach((trItem, trI) => {
        console.log(trI, trItem)
        trItem.forEach((tdItem, tdI) => {
          console.log(tdI, tdItem)
          this.tableData[trI][tdI].isActive = false
        })
      })
      // 点位高亮

      this.tableData[trI][tdI].isActive = true
    },
    moveOver (trI, tdI) {
      if (
        (this.coordinatesTable.x < 0 && this.coordinatesTable.y < 0) ||
        this.tableMousedown != true
      ) {
        return
      }
      // 鼠标经过的点
      this.throughCoordinate.x = trI
      this.throughCoordinate.y = tdI
      // 判断库框选区域
      if (this.throughCoordinate.x < this.coordinatesTable.x) {
        this.minX = this.throughCoordinate.x
        this.maxX = this.coordinatesTable.x
      } else {
        this.minX = this.coordinatesTable.x
        this.maxX = this.throughCoordinate.x
      }
      if (this.throughCoordinate.y < this.coordinatesTable.y) {
        this.minY = this.throughCoordinate.y
        this.maxY = this.coordinatesTable.y
      } else {
        this.minY = this.coordinatesTable.y
        this.maxY = this.throughCoordinate.y
      }
      // 先清屏
      this.tableData.forEach((trItem, trI) => {
        console.log(trI, trItem)
        trItem.forEach((tdItem, tdI) => {
          console.log(tdI, tdItem)
          this.tableData[trI][tdI].isActive = false
        })
      })
      console.log(this.minX, this.minY, this.maxX, this.maxY)
      for (let forX = this.minX; forX <= this.maxX; forX++) {
        console.log(forX, 'forX')
        for (let forY = this.minY; forY <= this.maxY; forY++) {
          console.log(forX, forY, 'bb')
          this.tableData[forX][forY].isActive = true
        }
      }

      console.log(trI, tdI, 'aaa')
    },
    moveUp (trI, tdI) {
      console.log(trI, tdI)

      setTimeout(() => {
        console.log(new Date())
        this.tableMousedown = false
      }, 50)
    },
    cancelActive () {
      var that = this
      console.log(this.tableMousedown)
      if (that.tableMousedown == true) {
        return
      }
      console.log(new Date())

      console.log(1111)

      that.coordinatesTable = JSON.parse(JSON.stringify({ x: -1, y: -1 }))
      that.throughCoordinate = JSON.parse(JSON.stringify({ x: -1, y: -1 }))
      that.tableData.forEach((trItem, trI) => {
        console.log(trI, trItem)
        trItem.forEach((tdItem, tdI) => {
          console.log(tdI, tdItem)
          that.tableData[trI][tdI].isActive = false
        })
      })
    }
  }
}
</script>

<style scoped>
* {
  -webkit-touch-callout: none; /*系统默认菜单被禁用*/
  -webkit-user-select: none; /*webkit浏览器*/
  -khtml-user-select: none; /*早期浏览器*/
  -moz-user-select: none; /*火狐*/
  -ms-user-select: none; /*IE10*/
  user-select: none;
}
input {
  -webkit-user-select: auto; /*webkit浏览器*/
}
textarea {
  -webkit-user-select: auto; /*webkit浏览器*/
}
.tr {
  display: flex;
}
.td {
  border: 1px solid #ccc;
}
.td .active {
  background: blue;
}
</style>
